import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:loxen/mode/inspiration/inspiration_style_bean.dart';
import 'package:loxen/utils/string_res.dart';
import 'package:provider/provider.dart';

class InspirationStyleWidget extends StatelessWidget {
  final InspirationStyleBean styleBean;
  final Style style;
  final ValueNotifier<int> _select = ValueNotifier(-1);

  InspirationStyleWidget({Key key, this.styleBean, this.style})
      : super(key: key) {
    if (style != null) {
      var list = styleBean.data.results;
      for (int i = 0; i < list.length; i++) {
        if (list[i] == style) {
          _select.value = i;
          break;
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(double.infinity, 95.h),
        child: Container(
          color: Theme.of(context).backgroundColor,
          child: SafeArea(
            child: Row(
              children: <Widget>[
                IconButton(
                    icon: Icon(
                      Icons.clear,
                      size: 40.w,
                      color: Theme.of(context).textTheme.subtitle2.color,
                    ),
                    onPressed: () => Navigator.of(context).pop())
              ],
            ),
          ),
        ),
      ),
      body: Container(
        padding: EdgeInsets.only(left: 35.w, right: 35.w, top: 10.h),
        color: Theme.of(context).backgroundColor,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                    child: Text(
                  StringResources.wo_de_feng_ge,
                  style: TextStyle(
                      fontSize: 32.sp,
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).textTheme.subtitle2.color),
                )),
                GestureDetector(
                  onTap: () {
                    if (_select.value < 0) {
                      Navigator.of(context).pop();
                    } else {
                      Navigator.of(context)
                          .pop(styleBean.data.results[_select.value]);
                    }
                  },
                  child: Container(
                    width: 105.w,
                    height: 49.h,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10.w)),
                      border: Border.all(color: Theme.of(context).primaryColor),
                    ),
                    child: Center(
                      child: Text(
                        StringResources.que_ding,
                        style: TextStyle(
                            fontSize: 23.sp,
                            fontWeight: FontWeight.bold,
                            color: Theme.of(context).primaryColor),
                      ),
                    ),
                  ),
                )
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top: 48.h),
              child: ChangeNotifierProvider(
                create: (_) => _select,
                child: GridView.builder(
                    itemCount: styleBean.data.results.length,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 25.w,
                        mainAxisSpacing: 25.h,
                        crossAxisCount: 3,
                        childAspectRatio: 2.77),
                    itemBuilder: (context, index) {
                      return _itemWidget(context, index);
                    }),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _itemWidget(BuildContext context, int index) {
    Style style = styleBean.data.results[index];
    return Selector<ValueNotifier<int>, bool>(
        builder: (_, select, __) {
          return GestureDetector(
            onTap: () {
              if (_select.value == index) {
                _select.value = -1;
              } else {
                _select.value = index;
              }
            },
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: select ? Color(0xFF0CABCB) : Color(0xFF999999),
                ),
              ),
              child: Center(
                child: Text(
                  style.name,
                  style: TextStyle(
                      fontSize: 24.sp,
                      fontWeight: FontWeight.bold,
                      color: select ? Color(0xFF0CABCB) : Color(0xFF999999)),
                ),
              ),
            ),
          );
        },
        selector: (_, model) => model.value == index);
  }
}
